<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>              
    <title>陌绘</title>  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">           
    <meta http-equiv="content-style-type" content="text/css"/>   
    <meta http-equiv="content-script-type" content="text/javascript"/>   
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>   
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>     
</head>   
<body>    
    <style>.u-sp,.m-selectshow .swbtns .swbtn,.m-video .video .fbox .playbtn,.m-video .users .item .arr,.m-footer .share .sbtn,.m-qrcodedialog .close,.m-qrcodedialog .qrcodewrap .txt .arr{background:url(/static/web/image/sprite.png) 9999px 9999px no-repeat}*[hidefocus]{outline:none}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0}fieldset,img,html,body,iframe{border:0}table{border-collapse:collapse;border-spacing:0}li{list-style:none}caption,th{font-weight:normal;font-style:normal;text-align:left}em{font-style:normal}strong{font-weight:bold}body,textarea,select,input{font-family:"Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif";font-size:14px;color:#444;outline:none;border:0}textarea{resize:none}input{vertical-align:middle;margin:0px}body{background-color:transparent}h1,h2,h3,h4,h5,h6{font-weight:normal}a,button{cursor:pointer}a{text-decoration:none;color:#333}a:hover{color:#10ae58}html,body{width:100%;height:100%}html{overflow:auto}body{text-align:left}.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:"."}.f-cb,.f-cbli li{zoom:1}.f-thide{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.f-hide{text-indent:-9999px;overflow:hidden}.f-ib{display:inline-block;zoom:1;*display:inline}.f-dn{display:none}.f-db{display:block}.f-pr{position:relative}.f-pf{position:fixed}.f-af{position:absolute;top:0;right:0;bottom:0;left:0}.f-fl{float:left}.f-fr{float:right}.f-pa{position:absolute}.f-tc{text-align:center}.f-f0{font-family:"Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif"}.f-f1{font-family:"Arial","Hiragino Sans GB", "SimSun",\5b8b\4f53, "Georgia", "serif"}.m-selectshow{height:540px;width:100%;overflow:hidden;background-color:#535057}.m-selectshow .pics{z-index:1;height:540px;margin:0 auto}.m-selectshow .pics .item{position:absolute;display:none;z-index:1;top:0;left:0;width:100%;height:100%}.m-selectshow .pics .item .pic{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}.m-selectshow .pics .loading{z-index:10;width:100%;height:100%;background-color:#fff}.m-selectshow .pics .loading span{position:absolute;line-height:20px;color:#666;font-size:13px;text-align:center;width:100px;top:50%;left:50%;margin-top:-10px;margin-left:-10px}.m-selectshow .swbtns{z-index:10;height:12px;width:300px;left:50%;bottom:37px;margin-left:-150px;text-align:center}.m-selectshow .swbtns .swbtn{width:12px;height:12px;margin:0 14px;background-position:-16px 0}.m-selectshow .swbtns .swbtn.cur{background-position:0 0}.u-dialog{z-index:4000;position:absolute;background-color:#fff;box-shadow:0px 2px 18px #444}.u-dialog .close{position:absolute;z-index:1;right:0;top:0}.u-dialog .content{position:relative;z-index:0;height:100%;width:100%}.u-dialog-mask{z-index:1000;background-color:#3b3b3b;opacity:0.75;filter:alpha(opacity=75);position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%}body{background-color:#fff;min-width:960px}.g-main{width:960px;margin:0 auto;text-align:left}.m-header .g-main{width:650px;height:120px}.m-header .logo{top:50%;left:50%;width:188px;height:22px;margin:-11px 0 0 -94px}.m-header .links{height:22px;width:200px;padding:49px 0}.m-header .links a.link{color:#4a4a4a;margin:0 15px;font-size:14px;line-height:22px}.m-header .links a.link:hover{color:#f48974}.m-funcs{height:425px}.m-funcs .item{padding:80px 30px 0 30px;width:260px}.m-funcs .item .ic{width:128px;height:128px;margin:0 auto}.m-funcs .item .ic.f1{background:url(/static/web/image/funs_1.jpg)}.m-funcs .item .ic.f2{background:url(/static/web/image/funs_2.jpg)}.m-funcs .item .ic.f3{background:url(/static/web/image/funs_3.jpg)}.m-funcs .item .nm{padding:17px 0 15px 0;text-align:center;color:#333;font-size:15px;line-height:1}.m-funcs .item .txt{font-size:14px;line-height:22px;color:#9b9b9b;text-align:center}.m-act{height:847px}.m-act .midbg{width:100%;height:100%;z-index:1;background:url(/static/web/image/mid_bg.jpg) center top}.m-act .midbg .topbg{top:-21px;left:0;width:100%;height:21px;background:url(/static/web/image/mid_top_bg.png) center top}.m-act .midbg .bottombg{bottom:-21px;left:0;width:100%;height:21px;background:url(/static/web/image/mid_bottom_bg.png) center top}.m-act .g-main{z-index:10}.m-act .tit{padding-top:95px;text-align:center;font-size:22px;line-height:55px;color:#212121}.m-act .line{height:2px;width:64px;background-color:#000;margin:0 auto}.m-act .itemwrap{padding:40px 0 30px 0;width:960px}.m-act .itemwrap .item{margin:12px 13px 13px 12px;background-color:#000;overflow:hidden}.m-act .itemwrap .item .pic{width:100%}.m-act .itemwrap .item .inner{width:100%;height:215px;top:215px;filter:alpha(opacity=0);opacity:0;-moz-transition:all .3s ease-in-out 0s;-o-transition:all .3s ease-in-out 0s;-webkit-transition:all .3s ease-in-out 0s;transition:all .3s ease-in-out 0s}.m-act .itemwrap .item .inner .innerbg{top:0;left:0;width:100%;height:100%;background-color:#f49874;filter:alpha(opacity=88);opacity:.88}.m-act .itemwrap .item .inner .innerbox{width:100%;bottom:20px;left:0px}.m-act .itemwrap .item .inner .innerbox .tit{padding:0 20px;color:#fff;font-size:16px;line-height:40px;text-align:left}.m-act .itemwrap .item .inner .innerbox p{padding:0 20px;color:#fff;font-size:14px;line-height:16px}.m-act .itemwrap .item:hover .inner{filter:alpha(opacity=100);opacity:1;top:0}.m-act .itemwrap .item.small{width:215px;height:215px}.m-act .itemwrap .item.big{width:455px;height:215px}.m-act .morebtn{display:block;width:120px;height:30px;background-color:#F48974;color:#fff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;margin:0 auto;text-align:center;font-size:13px;line-height:30px}.m-video{background-color:#f8f8f8}.m-video .thes{height:122px;padding-top:75px}.m-video .thes .item{width:295px;height:122px;background-color:#fff;margin:0 12px}.m-video .thes .item .ic{width:295px;height:122px}.m-video .thes .item .ic.i1{background:url(/static/web/image/the_1.png)}.m-video .thes .item .ic.i2{background:url(/static/web/image/the_2.png)}.m-video .thes .item .ic.i3{background:url(/static/web/image/the_3.png)}.m-video .video{padding:64px 0;height:540px;width:100%}.m-video .video .fbox{background-color:#000;width:100%;height:100%}.m-video .video .fbox .flashbox{top:0;left:0;width:100%;height:100%}.m-video .video .fbox .cover{top:0;left:0;width:100%;height:100%;background:url(/static/web/image/video_cover.jpg)}.m-video .video .fbox .playbtn{top:50%;left:50%;width:64px;height:66px;margin:-33px 0 0 -32px;background-position:-1px -15px}.m-video .users{padding-bottom:55px}.m-video .users .item{width:295px;margin:0 12px}.m-video .users .item .box{height:210px;background-color:#fff;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:40px}.m-video .users .item .box h5{color:#333;font-size:16px;line-height:40px}.m-video .users .item .box p{color:#999;line-height:22px}.m-video .users .item .arr{margin:0 auto;width:26px;height:18px;background-position:-174px 0}.m-video .users .item .face{margin:10px auto;padding:4px;width:90px;height:90px;background-color:#fff;-webkit-border-radius:47px;-moz-border-radius:47px;border-radius:47px}.m-video .users .item .face img{-webkit-border-radius:45px;-moz-border-radius:45px;border-radius:45px;width:90px;height:90px}.m-footer{background-color:#535057;height:323px}.m-footer .links{text-align:center;height:22px;padding:60px 0 15px 0}.m-footer .links a.link{color:#fff;margin:0 15px;font-size:14px;line-height:22px}.m-footer .links a.link:hover{color:#f48974}.m-footer .cp{text-align:center;color:#fff;font-size:13px;padding:15px 0}.m-footer .share{height:48px;text-align:center;padding-top:35px}.m-footer .share .sbtn{margin:0 20px;width:48px;height:48px}.m-footer .share .sbtn.weixin{background-position:-1px -88px}.m-footer .share .sbtn.weibo{background-position:-91px -88px}.m-qrcodedialog{background-color:#F48974;width:500px;height:300px}.m-qrcodedialog .close{width:14px;height:14px;top:10px;right:10px;background-position:-186px -26px}.m-qrcodedialog .qrcodewrap .qr{width:135px;height:135px;padding:30px 0 40px 0;margin:0 auto}.m-qrcodedialog .qrcodewrap .qr img{width:100%;height:100%}.m-qrcodedialog .qrcodewrap .txt{height:95px;text-align:center;background-color:#fff;line-height:30px;font-size:14px;color:#333;padding-top:16px}.m-qrcodedialog .qrcodewrap .txt .arr{background-position:-126px 0;width:24px;height:20px;top:-20px;left:50%;margin-left:-12px}
/*# sourceMappingURL=index.css.map */
</style>   
    <div class="m-header">   
        <div class="g-main f-pr">
            <a href="/" class="logo f-pa"><img src="/static/web/image/logo.png"></a>

            <u class="f-fl f-cb links">
                <li><a href="" class="link f-f0 f-fl j-showqrcode">活动预约</a></li>
                <li><a href="" class="link f-f0 f-fl j-showqrcode">团队定制</a></li>
            </u>      

            <u class="f-fr f-cb links">
                <li><a href="" class="link f-f0 f-fr j-showqrcode">场地合作</a></li>
                <li><a href="" class="link f-f0 f-fr j-showqrcode">成为讲师</a></li>
            </u>
        </div>
    </div>
    
    <div class="m-selectshow f-pr j-slidewrap">
        
        <div class="swbtns f-pa j-slidebtns">  
           
        </div>
    </div>   

    <div class="m-funcs">
        <div class="g-main f-pr">
            <div class="f-fl item">
                <div class="ic f1"></div>
                <h4 class="nm">趣玩</h4>
                <p class="txt">针对生活在城市人的零基础绘画体<br>验，所有人在讲师带领下都能完成<br>超乎想象的作品。</p>
            </div>

            <div class="f-fl item">
                <div class="ic f2"></div>
                <h4 class="nm">乐活</h4>
                <p class="txt">不用纠结于以前的不好玩、 <br>好玩的太累，让轻松有趣的活动<br>为生活增添精彩！</p>
            </div>

            <div class="f-fl item">
                <div class="ic f3"></div>
                <h4 class="nm">欢聚</h4>
                <p class="txt">新朋友、老朋友，来这里聚会， <br>摆脱俗套，告别拇指癌，让社交更<br>简单直接。</p>
            </div>
  
        </div>
    </div>
  
    <div class="m-act f-pr">
        <div class="f-pa midbg">
            <div class="f-pa topbg"></div>
            <div class="f-pa bottombg"></div>
        </div>
   
        <div class="g-main f-pr">  
            <h2 class="tit">近期活动</h2>  
            <div class="line"></div>  
   
            <div class="itemwrap f-cb" id="j-actwrap">
                <!--
                <a href="" class="f-fl f-pr item small" target="_blank">
                    <img src="" class="pic">
                    <div class="inner f-pa">
                        <div class="f-pa innerbg"></div>
                        <div class="f-pa innerbox">
                            <h5 class="f-thide tit">撒旦撒旦</h5>
                            <p class="f-thide">萨科技的哈看<br>啊萨科技的哈看<br>卡是极好的</p>
                        </div>  
                    </div>
                </a>
                <a href="" class="f-fl f-pr item big" target="_blank">
                    <img src="" class="pic">
                    <div class="inner f-pa">
                        <div class="f-pa innerbg"></div>
                        <div class="f-pa innerbox">
                            <h5 class="f-thide tit">撒旦撒旦</h5>
                            <p class="f-thide">萨科技的哈看<br>啊萨科技的哈看<br>卡是极好的</p>
                        </div>  
                    </div>
                </a>-->
            </div>

            <a href="" target="_blank" class="morebtn f-f0 j-showqrcode">> 更多精彩 <</a>
        </div>

        
    </div>
   
    <div class="m-video">
        <div class="g-main">  
            <div class="thes">
                <div class="item f-fl"><div class="ic i1"></div></div>
                <div class="item f-fl"><div class="ic i2"></div></div>
                <div class="item f-fl"><div class="ic i3"></div></div>
            </div>
   
            <div class="video">
                <div class="fbox f-pr">
                    <div class="flashbox" id="j-flashbox"></div>
                    <div class="cover f-pa" id="j-videocover"></div>  
                    <a class="f-pa playbtn" id="j-playbtn"></a>  
                </div>
            </div>

            <div class="users f-cb" id="j-teachers">
                <!-- <div class="item f-fl">
                    <div class="box">   
                        <h5>玩家 - 小李子</h5>  
                        <p>
                            针对生活在城市人的零基础绘画体验，所有人在讲师带领下都能完成超乎想象的作品。<br>
                            针对生活在城市人的零基础绘画体验，所有人在讲师带领下都能完成超乎想象的作品。针对生活在城市人的零基础绘画体验。
                        </p>
                    </div>  
                    <div class="arr"></div>
                    <div class="face">  
                        <img src="">
                    </div>
                </div> -->

               
            </div>

        </div>
    </div>

    <div class="m-footer">  
        <div class="g-main f-pr">
            <ul class="links">
                <li class="f-ib"><a href="" class="link f-f0 j-showqrcode">活动预约</a></li>
                <li class="f-ib"><a href="" class="link f-f0 j-showqrcode">团队定制</a></li>
                <li class="f-ib"><a href="" class="link f-f0 j-showqrcode">成为讲师</a></li>
                <li class="f-ib"><a href="" class="link f-f0 j-showqrcode">场地合作</a></li>
            </ul>
   
            <p class="cp">&copy; 2016 PAINTMORE陌绘 杭州极昼网络科技有限公司 浙ICP备16001318号-1</p>

            <div class="share">
                <a href="" target="_blank" class="sbtn weixin f-ib j-showqrcode"></a>
                <a href="http://weibo.com/u/5742643130?topnav=1&wvr=6&topsug=1&is_all=1" target="_blank" class="sbtn weibo f-ib"></a>
            </div>   
        </div>
    </div>
    
    <script type="text/javascript" src="/static/web/js/jquery-1.11.2.min.js?_v=1456045487512"></script>
    <script type="text/javascript">
        // 轮播图数据
        window.slideData = [
            {'link':'http://mp.weixin.qq.com/s?__biz=MzI2MDA1ODIzOA==&mid=400949801&idx=1&sn=16c66af05fcbd265b572a40434494102&scene=18#rd', 'pic':'http://paintmore.image.alimmdn.com/banner1.jpg?t=1455878794880'},
            {'link':'http://mp.weixin.qq.com/s?__biz=MzI2MDA1ODIzOA==&mid=400949801&idx=1&sn=16c66af05fcbd265b572a40434494102&scene=18#rd', 'pic':'http://paintmore.image.alimmdn.com/banner3.jpg?t=1455878795069'},
            {'link':'http://mp.weixin.qq.com/s?__biz=MzI2MDA1ODIzOA==&mid=400949801&idx=1&sn=16c66af05fcbd265b572a40434494102&scene=18#rd', 'pic':'http://paintmore.image.alimmdn.com/banner2.jpg?t=1455878794925'}
        ];
        /**
 * 简单轮播组件
 * options:
 *		parent : jq('.j-show'),
 *		btns : jq('.j-btn'), // 可以不用
 *      delayDraution : 5000,
 * 		data : [
 *			{'link':'', 'pic':''}
 *		],
 *		fn : function(lastIndex, posIndex){  // 显示每个时回调
 *	
 *		}
 *
 *	functions:
 *  	slideNext
 *  	slidePrev
 */
(function (jq, g){

	function SelectShow(){
		return this.init.apply(this, arguments);
	}

	var sPro = SelectShow.prototype;

	SelectShow.setting = {
		data : [],
		delayDraution : 5000,
		fn : null
	}

	sPro.init = function(options){
		this.setting = jq.extend(SelectShow.setting, options);

		this.parent = jq(this.setting.parent);
		this.parent.append('<div class="pics f-pr"></div>');
		this.container = this.parent.find('.pics');
		this.btns = jq(this.setting.btns);

		this.imageNotLoadList = [];
		this.hasLoadImageCount = 0;

		this.posIndex = -1;
		this.slideLength = this.setting.data.length;
		this.slideInterval = null;

		this.loadImageList();
	};

	sPro.initImgItems = function(){
		var self = this;

		jq.each(this.setting.data, function(index, item){
			var imgNode = jq('\
				<div class="item j-item">\
					<a href="'+ item.link +'" target="_blank">\
						<div class="pic"></div>\
					</a>\
				</div>');

			imgNode.find('.pic').css('background-image', 'url('+ item.pic +')');
			self.container.append(imgNode);
		})

 		this.imgItems = self.container.find('.j-item');

	}

	sPro.initEvent = function(){
		if(this.btns){
			var self = this;

			jq.each(this.btns, function(index, item){
				jq(item).on('mouseenter', function(evt){
					self.onSelectItem(index);
				}).on('mouseleave', function(evt){
					self.outSlideBtns();
				});
			});
		}
	}

	sPro.showLoading = function(){
		this.container.append('<div class="loading"><span>加载中...</span></div>');
	}

	sPro.hideLoading = function(){
		this.container.find('.loading').remove();
	}

	// 加载所有图片
	sPro.loadImageList = function(){
		var self = this;

		// 显示loading
		this.showLoading();

		jq.each(this.setting.data, function(index, item){
			// 为空不加载
			if (jq.trim(item.pic) != '') {
				self.imageNotLoadList.push(item.pic);
			}
		})

		for (var i = 0; i < this.imageNotLoadList.length; i++) {
			this.loadImage(this.imageNotLoadList[i]);
		};
	}

	// 所有图片加载完成
	sPro.loadComplete = function(){
		this.initImgItems();
		this.initEvent();

		this.showSlide(0);
		this.autoSlide();

		this.hideLoading();
	}

	// 加载一个图片
	sPro.loadImage = function(url){
		var self = this;

		$('<img />').bind('load', function(){
			self.hasLoadImageCount++;

			if (self.hasLoadImageCount == self.imageNotLoadList.length) {
				self.loadComplete();
			};

		}).attr('src', url);
	}

	sPro.showSlide = function(index){
		if(this.posIndex == index) {
			return;
		};
					
		var lastIndex = this.posIndex;

		// 恢复上一个，强制恢复清晰度
		if (lastIndex >= 0) {
			this.imgItems.eq(lastIndex).stop().css({'z-index': '3', 'opacity':'1'});
			this.btns && this.btns.eq(lastIndex).removeClass('cur');
		}

		this.posIndex = index;

		this.imgItems.eq(this.posIndex).stop().css({'z-index':'2', 'opacity':'1', 'display':'block'});
		this.btns && this.btns.eq(this.posIndex).addClass('cur');

		if (lastIndex >= 0) {
			var self = this;

			this.imgItems.eq(lastIndex).stop().fadeTo(400, 0, function(){
				self.imgItems.eq(lastIndex).hide().css('z-index', '1');
			});
		}

		this.setting.fn && this.setting.fn(lastIndex, this.posIndex);
	}

	sPro.onSelectItem = function(index){		
		if (!!this.slideInterval) {
			clearInterval(this.slideInterval);
		};

		this.showSlide(Number(index));
	}

	sPro.slideNext = function(){
		var next = this.posIndex + 1

		next = next > this.slideLength - 1 ? 0 : next;

		this.showSlide(next);
	}

	sPro.slidePrev = function(){
		var prev = this.posIndex - 1

		prev = prev < 0 ? this.slideLength - 1  : prev;

		this.showSlide(prev);
	}

	sPro.autoSlide = function(){
		if (!!this.slideInterval) {
			clearInterval(this.slideInterval);
		};

		var self = this;

		this.slideInterval = setInterval(function(){
			self.slideNext();
		}, this.setting.delayDraution);

	}

	sPro.outSlideBtns = function(evt){
		this.autoSlide();
	}

	jq.selectShow = function(options){
		return new SelectShow(options);
	}

})(jQuery, window);

        /**
 * 专题用的简单弹窗
 * options
 *		content :
 *		clazz  :  // 弹窗节点类名
 *  	top : 
 *		left :
 *		clickMaskClose : false
 *		bodyClickClose : false
 *	 	afterShow : fn
 *		afterClose : fn
 */
(function (jq, g){

	function Dialog(){
		return this.init.apply(this, arguments);
	}

	Dialog.setting = {
		content : '',
		afterShow : null,
		top : null,
		left : null
	}

	var pagePro = Dialog.prototype;

	pagePro.init = function(options){
		if(!options){
			return;
		}

		this.setting = jq.extend({}, Dialog.setting, options);

		if(jq(document.body).find('.u-dialog-mask').length){
			this.masknode = jq(document.body).find('.u-dialog-mask');
		}else{
			this.masknode = jq('<div class="u-dialog-mask"></div>');
		}
		
		this.dialognode = jq('\
				<div class="u-dialog '+ (this.setting.clazz || '') +'">\
					<a class="close"></a>\
					<div class="content"></div>\
				</div>');

		return this;
	}

	pagePro.show = function(options){
		this.showMask();

		this.contentNode = jq(this.setting.content);

		this.dialognode.find('.content').append(this.contentNode);

		this.dialognode.appendTo(document.body);

		var top = this.setting.top != undefined ? this.setting.top : ((jq(window).height() - this.contentNode.outerHeight())/2 + (jq(document).scrollTop() || 0));
		var left = this.setting.left != undefined ? this.setting.left : ((jq(window).width() - this.contentNode.outerWidth())/2);

		top = top < 0 ? 0 : top;
		left = left < 0 ? 0 : left;

		this.dialognode.css({
			'top' : top + 'px',
			'left' : left + 'px'
		});
			
		this.initEvent();

		this.setting.afterShow && this.setting.afterShow.call(this, this.dialognode);

		return this;
	}

	pagePro.initEvent = function() {
		var self = this;

		this.dialognode.find('.close').on('click', function(event) {
			self.close();
		});

		if (this.setting.clickMaskClose) {
			masknode.click(self.close.bind(self));
		};

		// this.dialognode.click(function (event) {
		//     event.stopPropagation();
		// });
	}

	pagePro.showMask = function() {
		this.masknode && this.masknode.appendTo(document.body);
	}

	pagePro.close = function(options){
		this.masknode && this.masknode.remove();
		this.dialognode.remove();

		jq(document.body).unbind('click', self.close);

		this.setting.afterClose && this.setting.afterClose.call(this);

		return this;
	}

	jq.showlDialog = function(options){
		return (new Dialog(options)).show();
	}

})(jQuery, window);
        /* index js */
(function (jq, g) {
   jq(document).ready(function(jq) {
      // 获取字符串长度，中文是长度是2
      function getCharsL(_chars) {
         _chars = _chars || '';
         _chars = _chars.replace(/^\n+|\n+$/g, ""); //将富文本中\n过滤
         var _entryLen0 = _chars.length,
            _entryLen = 0;
         var _cnChar = _chars.match(/[^\x00-\x80]/g); //利用match方法检索出中文字符并返回一个存放中文的数组 
         if (!!_cnChar && _cnChar.length > 0)
            _entryLen = _cnChar.length || 0; //算出实际的字符长度
         return _entryLen0 + _entryLen;
      };

      // 截断字符串，处理中英文情况 实际的长度，中文算两个，则传入的_actLength为*2
      function sliceCnAndEns(_chars, _actLength) {
         _chars = _chars || '';
         var _ret = '',
            _length = _chars.length,
            _chars = _chars.split(''),
            _readLength = 0;
         for (var i = 0; i < _length; i++) {
            var _char = _chars[i];
            var _arr = _char.match(/[^\x00-\x80]/g);
            if (!!_arr && _arr.length > 0) {
               _readLength += 2; //中文字符
            } else {
               _readLength += 1; //英文字符
            }
            if (_readLength > _actLength) {
               break;
            }
            _ret += _char;
         }
         return _ret;
      }; 

      function buildSlide(){
         // slide
         for (var i = 0; i < window.slideData.length; i++) {
            jq('.j-slidebtns').append('<a class="swbtn f-ib j-slidebtn"></a>');
         };

         jq.selectShow({
            parent : jq('.j-slidewrap'),
            btns : jq('.j-slidebtns').find('.j-slidebtn'),
            data : window.slideData
         });

      }
   	
      // activity
      function buildAct(data){
         if (data.errno != 0 || !data.data) {
            return;
         };

         var clazzs = ['small', 'small', 'big', 'big', 'small', 'small'];
         var tems = '';

         var list = data.data;

         for (var i = 0; i < list.length; i++) {
               if(!list[i] || !clazzs[i]) return;
            
               var tem = '<a href="" class="j-showqrcode f-fl f-pr item '+ clazzs[i] +'" target="_blank">\
                       <img src="'+ list[i].cover +'" class="pic">\
                       <div class="inner f-pa">\
                           <div class="f-pa innerbg"></div>\
                           <div class="f-pa innerbox">\
                               <h5 class="f-thide tit">'+ list[i].title +'</h5>\
                               <p class="f-thide">'+ list[i].start_time +'</p>\
                               <p class="f-thide" title="'+ list[i].address_info.address +'">'+ list[i].address_info.address +'</p>\
                           </div>\
                       </div>\
                   </a>';

               tems += tem;

         };

         jq('#j-actwrap').append(tems);
      }

      // video
      function playVideo(){
         jq('#j-playbtn').hide();
         jq('#j-videocover').hide();

         var _tpl = '<video id="" width="100%" height="100%" controls="controls" autoplay="autoplay" preload="auto">\
         <source src="http://paintmore.file.alimmdn.com/99.mp4?t=1453882587284" type="video/mp4">Your browser does not support the video tag.</video>';
         
         jq('#j-flashbox').append(_tpl);
      }

      // teacher
      function buildTeacher(data){
         if (data.errno != 0 || !data.data) {
            return;
         };

         var tems = '';
            
         var list = data.data;

         for (var i = 0; i < list.length; i++) { 
            if (getCharsL(list[i].intro) > 200) {
               list[i].intro = sliceCnAndEns(list[i].intro, 200) + '...';
            };

               var tem = '<div class="item f-fl">\
                     <div class="box">\
                        <h5>'+ list[i].name +'</h5>\
                        <p>'+ list[i].intro +'</p>\
                     </div>\
                     <div class="arr"></div>\
                     <div class="face">\
                        <img src="'+ list[i].avatar +'">\
                     </div>\
                  </div>';

               tems += tem;
         };

         jq('#j-teachers').append(tems);
      }

      // qrcode
      function buildQrcode(){
         var temp = '<div class="qrcodewrap">\
                        <div class="qr"><img src="/static/web/image/qrcode.png"></div>\
                        <div class="txt f-pr f-f0">\
                           <div class="arr f-pa"></div>\
                           <p>好像此路不通<br>先去微信玩一会吧<p>\
                        </div>\
                     </div>';

         jq(document.body).delegate('.j-showqrcode', 'click', function(e){
               e.preventDefault()

               jq.showlDialog({
                  content:temp,
                  clazz:'m-qrcodedialog'
               });

         });
      }

      function initPage(){
         buildSlide();
         buildQrcode();

         jq('#j-playbtn').click(playVideo);
         jq.getJSON('http://paintmore.cn/api/activity/gets?recommend=index', buildAct);
         jq.getJSON('http://paintmore.cn/api/lecturer/gets?recommend=index', buildTeacher);

      }

      initPage();

   });
})(jQuery, window);
    </script>
</body>
</html>
